<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="header" v-if="balance">
            <view class="account">
                <view class="left">
                    <text>可用余额 (元)</text>
                    <text class="price">{{ (balance.RechargeBalance + balance.SelfBalance).toFixed(2) }}</text>
                </view>
                <view class="right">
                    <text class="btn btn-yellow recharge-btn"
                        @click="easyGoTo('/pages_me/packet/finance/recharge')">充值</text>
                </view>
            </view>
            <view class="info-bar">
                <view class="item">
                    <text class="item-title">充值(元)</text>
                    <text class="item-value">{{ balance.RechargeBalance }}</text>
                </view>
                <view class="item">
                    <text class="item-title">返利(元)</text>
                    <text class="item-value">{{ balance.SelfBalance }}</text>
                </view>
                <view class="item">
                    <text class="item-title">积分</text>
                    <text class="item-value">{{ balance.Integral }}</text>
                </view>
                <view class="item">
                    <text class="item-title">授信</text>
                    <text class="item-value">{{ balance.CreditLimit == 2147483647 ? "-" : balance.CreditLimit }}</text>
                </view>
            </view>
        </view>
        <view class="main">
            <view class="card-group">
                <card-group-cell label="充值记录"
                    @click.native="easyGoTo('/pages_me/packet/finance/rechargeRecord')"></card-group-cell>
            </view>
            <view class="card-group">
                <card-group-cell :label="returnPoint ? returnPoint + '明细' : '返利账户' + '明细'"
                    @click.native="easyGoTo('/pages_me/packet/finance/rebateDetailList?name=' + returnPoint)"></card-group-cell>
                <card-group-cell :label="recharge ? recharge + '明细' : '充值账户' + '明细'"
                    @click.native="easyGoTo('/pages_me/packet/finance/rechargeDetailList?moneyType=2&name=' + recharge)"></card-group-cell>
                <card-group-cell :label="integral ? integral + '明细' : '积分账户' + '明细'"
                    @click.native="easyGoTo('/pages_me/packet/finance/rechargeDetailList?moneyType=1&name=' + integral)"></card-group-cell>
                <card-group-cell :label="credit ? credit + '明细' : '专款账户' + '明细'"
                    @click.native="easyGoTo('/pages_me/packet/finance/rechargeDetailList?moneyType=4&name=' + credit)"></card-group-cell>
                <card-group-cell :label="special ? special + '明细' : '专款账户' + '明细'"
                    @click.native="easyGoTo('/pages_me/packet/finance/rechargeDetailList?moneyType=5&name=' + special)"></card-group-cell>
            </view>
        </view>
    </view>
</template>

<script>
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import { getAccountBalance } from "@/service/api/member.js"
import { GetAnotherName } from "@/service/api/baseDictionary.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        cardGroupCell,
    },
    data() {
        return {
            config: {
                title: "我的财务",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            balance: null,
            integral: '',
            recharge: '',
            returnPoint: '',
            special: '',
            credit: '',
        }
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
    onShow() {
        this.getAccountBalance()
        this.aliasFun('积分')
        this.aliasFun('充值')
        this.aliasFun('返利')
        this.aliasFun('授信')
        this.aliasFun('专款')
    },
    mounted() {
        // this.getAccountBalance()
    },
    methods: {
        getAccountBalance() {
            getAccountBalance().then((res) => {
                if (res.State) {
                    this.balance = res.Data
                }
            })
        },
        aliasFun(name) {
            let path = "?name=" + name
            GetAnotherName(path).then((res) => {
                if (res.State == 1) {
                    if (name == '积分') {
                        this.integral = res.Data
                    }
                    if (name == '充值') {
                        this.recharge = res.Data
                    }
                    if (name == '返利') {
                        this.returnPoint = res.Data
                    }
                    if (name == '授信') {
                        this.credit = res.Data
                    }
                    if (name == '专款') {
                        this.special = res.Data
                    }

                }
            })
        }
    },
}
</script>

<style lang="scss">
.header {
    background: $app-color-main;
    padding: $app-page-padding;

    .account {
        display: flex;
        height: 140rpx;
        flex-direction: row;
        background: rgba($color-white, 0.2);
        border-radius: $border-radius-10;
        margin-bottom: 40rpx;
        align-items: center;
        padding: $app-page-padding;

        .left {
            display: flex;
            flex: 1;
            flex-direction: column;

            text {
                color: $color-white;
            }

            .price {
                font-weight: 700;
                font-size: $font-size-36;
                margin-top: 20rpx;
            }
        }
    }

    .info-bar {
        display: flex;
        flex-direction: row;

        .item {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            text {
                color: $color-white;
            }

            .item-title {
                margin-bottom: 10rpx;
            }

            .item-value {
                font-size: $font-size-36;
            }
        }
    }
}

.main {
    padding: $app-page-padding;
}

.recharge-btn {
    width: 130rpx;
    padding: 0;
}

.main .card-group-cell .label {
    font-size: 28rpx;
}

.main .card-group-cell .uni-icons {
    color: #ccc;
}
</style>
